style adjustments for settings

3 files changed, 51 insertions, 50 deletions

diff --git a/src/routes/[username]/settings/+page.svelte b/src/routes/[username]/settings/+page.svelte
index 8270ad51..037d44a5 100644
--- a/src/routes/[username]/settings/+page.svelte
+++ b/src/routes/[username]/settings/+page.svelte
@@ -30,7 +30,7 @@
 
 <AppHeader />
 
-<form on:submit|preventDefault={save} class="mb-20">
+<form on:submit|preventDefault={save} class="mb-28">
 	<div class="my-20 px-3 md:px-0 w-full md:w-[400px] mx-auto space-y-8">
 		<h1 class="text-center text-3xl md:text-4xl font-semibold mb-10">
 			{$t('user.settings.header')}
@@ -46,11 +46,10 @@
 
 		<svelte:component this={comp} />
 	</div>
-	<div class="fixed bottom-0 bg-white shadow border w-full">
+	<div class="z-10 fixed bottom-0 bg-white shadow border w-full">
 		<button type="submit" class="primary">
 			<Icon icon="save" style="w-6 h-6 mr-1" />
 			<div class="my-auto">Save Settings</div>
 		</button>
 	</div>
 </form>
-
diff --git a/src/routes/[username]/settings/_pos.svelte b/src/routes/[username]/settings/_pos.svelte
index f44f8312..83a942bc 100644
--- a/src/routes/[username]/settings/_pos.svelte
+++ b/src/routes/[username]/settings/_pos.svelte
@@ -10,7 +10,7 @@
 		try {
 			$user.currency = e.target.value;
 			let r = await put('/' + $user.username, { user: $user });
-			success('Local currency updated!');
+			success('Local currency updated');
 		} catch (e) {
 			failure(e.message);
 		}
diff --git a/src/routes/[username]/settings/_security.svelte b/src/routes/[username]/settings/_security.svelte
index dd184fe4..5b7aaf8e 100644
--- a/src/routes/[username]/settings/_security.svelte
+++ b/src/routes/[username]/settings/_security.svelte
@@ -27,7 +27,7 @@
 				await put('/enable2fa', { token });
 				success('2fa enabled');
 				$user.twofa = 1;
-        toggleEnabling();
+				toggleEnabling();
 			}
 		} catch (e) {
 			failure('Failed to enable 2fa, try again');
@@ -41,7 +41,7 @@
 				await put('/disable2fa', { token });
 				success('2fa disabled');
 				$user.twofa = 0;
-        toggleDisabling();
+				toggleDisabling();
 			}
 		} catch (e) {
 			failure('Failed to disable 2fa, try again');
@@ -88,50 +88,52 @@
 	</select>
 </div>
 
-{#if setting2fa}
-	<Qr text={$user.otpsecret} />
+<div>
+	{#if setting2fa}
+		<Qr text={$user.otpsecret} />
 
-	<div class="text-center my-4">
-		{$t('user.settings.accountId')}<br />
-		<b>{$user.otpsecret}</b>
-	</div>
-	<div class="text-center my-4">
-		{$t('user.settings.oneTimeCode')}<br />
-		<Pincode bind:code bind:value={token} bind:this={tokenInput}>
-			<PincodeInput />
-			<PincodeInput />
-			<PincodeInput />
-			<PincodeInput />
-			<PincodeInput />
-			<PincodeInput />
-		</Pincode>
-	</div>
-{:else if disabling2fa}
-	<div class="text-center my-4">
-		{$t('user.settings.oneTimeCode')}<br />
-		<Pincode bind:code bind:value={token} bind:this={tokenInput}>
-			<PincodeInput />
-			<PincodeInput />
-			<PincodeInput />
-			<PincodeInput />
-			<PincodeInput />
-			<PincodeInput />
-		</Pincode>
-	</div>
-{:else}
-	<span class="font-bold mb-1">{$t('user.settings.twofa')}</span>
-	<p class="text-secondary mb-1">
-		{$t('user.settings.twofaDescription')}
-	</p>
-	{#if $user.twofa}
-		<button type="button" class="primary" on:click={toggleDisabling}>
-			<Icon icon="mobile" style="mr-1" />
-			{$t('user.settings.twofaDisable')}
-		</button>
+		<div class="text-center my-4">
+			{$t('user.settings.accountId')}<br />
+			<b>{$user.otpsecret}</b>
+		</div>
+		<div class="text-center my-4">
+			{$t('user.settings.oneTimeCode')}<br />
+			<Pincode bind:code bind:value={token} bind:this={tokenInput}>
+				<PincodeInput />
+				<PincodeInput />
+				<PincodeInput />
+				<PincodeInput />
+				<PincodeInput />
+				<PincodeInput />
+			</Pincode>
+		</div>
+	{:else if disabling2fa}
+		<div class="text-center my-4">
+			{$t('user.settings.oneTimeCode')}<br />
+			<Pincode bind:code bind:value={token} bind:this={tokenInput}>
+				<PincodeInput />
+				<PincodeInput />
+				<PincodeInput />
+				<PincodeInput />
+				<PincodeInput />
+				<PincodeInput />
+			</Pincode>
+		</div>
 	{:else}
-		<button type="button" class="primary" on:click={toggleEnabling}>
-			<Icon icon="mobile" style="mr-1" />
-			{$t('user.settings.twofaSetup')}
-		</button>
+		<span class="font-bold mb-1">{$t('user.settings.twofa')}</span>
+		<p class="text-secondary mb-1">
+			{$t('user.settings.twofaDescription')}
+		</p>
+		{#if $user.twofa}
+			<button type="button" class="primary" on:click={toggleDisabling}>
+				<Icon icon="mobile" style="mr-1" />
+				{$t('user.settings.twofaDisable')}
+			</button>
+		{:else}
+			<button type="button" class="primary" on:click={toggleEnabling}>
+				<Icon icon="mobile" style="mr-1" />
+				{$t('user.settings.twofaSetup')}
+			</button>
+		{/if}
 	{/if}
-{/if}
+</div>